<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div>
              <div class="states-type">
                <span class="type-title">数据类型:</span>
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm states-type-item"
                  :class="{ isActive: siteChange == item.index }"
                  v-for="item in sitetype"
                  :key="item.index"
                  @click="allSites(item)"
                >
                  {{ item.name }}
                </button>
              </div>
              <div class="states-type">
                <span class="type-title">选择环境:</span>
                <button
                  type="button"
                  class="btn btn-light rounded-pill btn-sm states-type-item"
                  :class="{ isActive: reptileChange == item.index }"
                  v-for="item in reptiletype"
                  :key="item.index"
                  @click="reptile(item)"
                >
                  {{ item.name }}
                </button>
              </div>
              <form @submit.prevent="rangeform" style="margin-top:20px;">
                <div class="extend-content">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label">服务器IP地址</label>
                        <b-form-input
                          for="text"
                          v-model="extendInfo.sponsorName"
                          placeholder="请输入服务器IP地址"
                          trim
                        ></b-form-input>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label">服务器IP端口号</label>
                        <b-form-input
                          for="text"
                          v-model="extendInfo.industry"
                          placeholder="请输入服务器IP端口号"
                          trim
                        ></b-form-input>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label">用户名</label>
                        <b-form-input
                          for="text"
                          v-model="extendInfo.sponsorName"
                          placeholder="请输入用户名"
                          trim
                        ></b-form-input>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="control-label">密码</label>
                        <b-form-input
                          for="text"
                          v-model="extendInfo.industry"
                          placeholder="请输入密码"
                          trim
                        ></b-form-input>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="productdesc">备注</label>
                    <textarea
                      v-model="extendInfo.textarea"
                      class="form-control"
                      name="textarea"
                      rows="6"
                      placeholder="请填入备注说明"
                    ></textarea>
                  </div>
                </div>
                <div class="form-group mb-0">
                  <div style="width: 400px; margin: 0 auto">
                    <b-button
                      type="submit"
                      class="btn btn-primary"
                      variant="success"
                      @click="makeToast('success')"
                      >测试</b-button
                    >
                    <button type="submit" class="btn btn-primary" style="float: right">
                      连接
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import Layout from "../../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";

import { required, minLength } from "vuelidate/lib/validators";
export default {
  validations: {
    basicContent: {
      name: { required, minLength: minLength(6) },
      address: { required },
    },
    value1: { required },
  },
  components: {
    Layout,
    PageHeaderNew,
  },
  data() {
    return {
      items: [
        {
          text: "数仓实例",
          url: "/datahouse/example",
        },{
          text: "添加数据实例",
          url: "/",
        }
      ],
      submit: false,
      //扩展信息默认填充
      extendInfo: {
        web: "",
        rp: "",
        sponsor: "",
        sponsorNmae: "",
        industry: "",
        address: "",
        location: "",
        record: "",
        textarea: "",
      },
      // 基本信息
      info: {
        name: "",
        address: "",
      },
      // 数据类型
      sitetype: [
        {
          name: "MySQL",
          index: 1,
        },{
          name: "ElasticSearch",
          index: 2,
        },{
          name: "MongoDB",
          index: 3,
        },{
          name: "ClickHouse",
          index: 4,
        },{
          name: "Redis",
          index: 5,
        },{
          name: "kafka",
          index: 6,
        },
      ],
      siteChange: 1,

      // 选择环境
      reptiletype: [
        {
          name: "测试环境",
          index: 1,
        },{
          name: "正式环境",
          index: 2,
        },{
          name: "暂存环境",
          index: 3,
        },
      ],
      reptileChange: 1,
    };
  },
  methods: {
    rangeform() {
      this.submit = true;
      // stop here if form is invalid
      this.$v.$touch();
    },
    makeToast(variant = null) {
      this.$bvToast.toast("Toast body content", {
        title: `Toast ${variant || "default"}`,
        variant: variant,
        solid: true,
      });
    },
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    // 选择环境
    reptile(item) {
      this.reptileChange = item.index;
    },
  }
};
</script>

<style lang="scss" scoped>
label{
  font-weight: normal;
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    // width: 116px;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>